<template>
  <div class="class-management-manual">
    <div class="flex justifyBetween">
      <el-tabs v-model="activeName" class="class-tabs">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabs" :key="index"></el-tab-pane>
      </el-tabs>
      <el-button plain @click="exportWord" v-if="!['4','8','9'].includes(activeName)">导出{{tabs[activeName*1].label}}</el-button>
    </div>

    <div class="actionBtn" v-if="counter.isLocalhost">
      <el-button type="primary" @click="proxy.$refs.inputFile.click()">上传{{tabs[activeName*1].label}}模板</el-button>
      <el-button @click="downWord">下载{{tabs[activeName*1].label}}模板</el-button>
    </div>

    <!-- 课程安排表 -->
    <courseSchedule ref="courseScheduleCom" :info="props.info" :archiveBinding="props.archiveBinding" :type="tabs[activeName*1].type" v-if="currentTab.components == 'courseSchedule'"></courseSchedule>

    <!-- 学员信息 -->
    <studentInfoForm ref="studentInfoFormCom" :info="props.info" :type="tabs[activeName*1].type" v-else-if="currentTab.components =='studentInfoForm'"></studentInfoForm>

    <!-- 出勤记录表 -->
    <attendanceSchedule ref="attendanceScheduleCom" :info="props.info" :type="tabs[activeName*1].type" v-else-if="currentTab.components == 'attendanceSchedule'"></attendanceSchedule>

    <!-- 学员花名册 -->
    <studentRoster ref="studentRosterCom" :info="props.info" :type="tabs[activeName*1].type" v-else-if="currentTab.components =='studentRoster'"></studentRoster>

    <!-- 教学计划 -->
    <teachingAnalysis ref="teachingAnalysisCom" :archiveBinding="props.archiveBinding" :info="props.info" :type="currentTab.type" v-else-if="tabs[activeName*1].components == 'teachingAnalysis'"></teachingAnalysis>

    <!-- 授课计划 -->
    <teachingPlan ref="teachingPlanCom" :archiveBinding="props.archiveBinding" :info="props.info" :type="currentTab.type" v-else-if="currentTab.components == 'teachingPlan'"></teachingPlan>

    <!-- 教案 -->
    <lessonPlan ref="lessonPlanCom" :archiveBinding="props.archiveBinding" :info="props.info" :type="currentTab.type" v-else-if="currentTab.components == 'lessonPlan'"></lessonPlan>

    <!-- 教案附表 -->
    <lessonPlanAppendix ref="lessonPlanAppendixCom" :type="currentTab.type" :archiveBinding="props.archiveBinding" :info="props.info" v-else-if="currentTab.components == 'lessonPlanAppendix'"></lessonPlanAppendix>

    <!-- 教学日志 -->
    <teachingLog ref="teachingLogCom" :archiveBinding="props.archiveBinding" :info="props.info" :type="currentTab.type" v-else-if="currentTab.components == 'teachingLog'"></teachingLog>

    <!-- 学员评议 -->
    <collegeEvaluation ref="collegeEvaluationCom" :archiveBinding="props.archiveBinding" :info="props.info" :type="currentTab.type" v-else-if="currentTab.components == 'collegeEvaluation'"></collegeEvaluation>

    <!-- 培训结果统计表 -->
    <trainingResultStatistics ref="trainingResultStatisticsCom" :info="props.info" :type="currentTab.type" v-else-if="currentTab.components == 'trainingResultStatistics'"></trainingResultStatistics>

    <input type="file" @change="handleFileUpload" v-show="false" ref="inputFile" />
  </div>
</template>

<script setup lang="ts">
// 学员花名册
import studentRoster from "@/views/courseManage/components/studentRoster.vue";
//课程安排表
import courseSchedule from "@/views/courseManage/components/courseSchedule.vue";
//授课计划
import teachingPlan from "@/views/courseManage/components/teachingPlan.vue";
//教案附表
import lessonPlanAppendix from "@/views/courseManage/components/lessonPlanAppendix.vue";
import trainingResultStatistics from "@/views/courseManage/components/trainingResultStatistics.vue";
import collegeEvaluation from "@/views/courseManage/components/collegeEvaluation.vue";
import teachingLog from "@/views/courseManage/components/teachingLog.vue";
import lessonPlan from "@/views/courseManage/components/lessonPlan.vue";
import teachingAnalysis from "@/views/courseManage/components/teachingAnalysis.vue";
import attendanceSchedule from "@/views/courseManage/components/attendanceSchedule.vue";
import studentInfoForm from "@/views/courseManage/components/studentInfoForm.vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
let props = defineProps(["info", "archiveBinding"]);

let activeName = ref("0");
let tabs = ref([
  {
    label: "B1课程安排表",
    name: "0",
    type: "class-B1",
    components: "courseSchedule",
  },
  {
    label: "B3学员信息表",
    name: "1",
    type: "class-B3",
    components: "studentInfoForm",
  },
  {
    label: "B5出勤记录表",
    name: "2",
    type: "class-B5",
    components: "attendanceSchedule",
  },
  {
    label: "B6学员花名册",
    name: "3",
    type: "class-B6",
    components: "studentRoster",
  },
  {
    label: "B7授课计划",
    name: "4",
    type: "class-B7",
    components: "teachingPlan",
  },
  {
    label: "B7教学分析及执行后记",
    name: "5",
    type: "class-B7",
    components: "teachingAnalysis",
  },
  { label: "B8教案", name: "6", type: "class-B8", components: "lessonPlan" },
  {
    label: "B8教案附表",
    name: "7",
    type: "class-B8-appendix",
    components: "lessonPlanAppendix",
  },
  {
    label: "B9教学日志",
    name: "8",
    type: "class-B9",
    components: "teachingLog",
  },
  // {
  //   label: "B10B11学员评议",
  //   name: "9",
  //   type: "class-B10-B11",
  //   components: "collegeEvaluation",
  // },
  // {
  //   label: "B12培训结果统计表",
  //   name: "10",
  //   type: "class-B12",
  //   components: "trainingResultStatistics",
  // },
]);

let currentTab = computed(() => {
  return tabs.value[activeName.value * 1];
});

async function exportWord() {
  let components = tabs.value[activeName.value * 1].components;
  let name = `${components}Com`;
  console.log("组件名", name);
  proxy.$refs[name].exportWord();
}

async function downWord() {
  let components = tabs.value[activeName.value * 1].components;
  console.log("组件名", components);
  proxy.$refs[`${components}Com`].downLoadTemplate();
}

async function handleFileUpload(event) {
  try {
    let file = {
      name: tabs.value[activeName.value * 1].label,
      path: "",
      type: tabs.value[activeName.value * 1].type,
    };

    const files = event.target.files;
    file.name = files[0].name;
    file.path = await counter.uploadFile(files[0]);
    await proxy.$apis.fileTemplate({
      data: file,
      type: "update",
    });
    proxy.$utils.showToast("上传成功");
    let components = tabs.value[activeName.value * 1].components;
    proxy.$refs[`${components}Com`].getTemplateUrl();
  } catch (error) {
  } finally {
    event.target.value = "";
  }
}
</script>


<style lang="scss">
.class-tabs {
  .el-tabs__nav-wrap::after {
    background-color: transparent !important;
  }
}
</style>
<style lang="scss" scoped>
.class-management-manual {
  width: 100%;
  .actionBtn {
    margin-bottom: 15px;
  }
}
</style>
